<template>
  <div class="permission">
<!--    <zh-row :span="24" style="height: 100%; flex-direction: column">
      <zh-col>
        <zh-form ref="userQueryFrom"  :model="queryParam">
          <zh-input
              prop="taskArea"
              type="tree"
              mode="multiple"
              label="任务范围"
              placeholder="支持多选"
              ref="taskArea"
              allowClear
              tree-checkable
              multiple
              v-model="queryParam.manageAreas"
              :treeData="taskAreaTree"
              :showCheckedStrategy="SHOW_PARENT"
              :span="16"
              style="float: left"
              :labelCol="{ span: 3 }"
              :wrapperCol="{ span: 10 }"
              @change="manageAreaChange()"
          >
          </zh-input>
        </zh-form>
      </zh-col>
    </zh-row>-->
      <div class="operate">

        <div>
          <div style="flex: 0 0 auto">
            <ep-search
                :size="size"
                v-model="queryParam.c0302"
                placeholder="请输入任务名称"
                enter-button="chaxun "
                @search="findList"
            ></ep-search>
          </div>
          <ep-button :size="size" style="margin-left: 15px" icon="refresh.svg" @click="clearBtn"></ep-button>
          <a-tree-select
              :size="size"
              placeholder="请选择任务范围(可多选)"
              ref="taskArea"
              allowClear
              tree-checkable
              style="margin-left: 15px;width:22vw"
              v-model="queryParam.manageAreas"
              :show-checked-strategy="SHOW_PARENT"
              :treeData="taskAreaTree"
              @change="manageAreaChange()"
          />
        </div>
      </div>

    <a-modal
        title="排查任务排行"
        centered
        style=""
        width="90%"
        destroyOnClose
        :mask-closable="false"
        v-model="visible"
        @cancel="handleCancel"
    >
      <check-tasks-ranking-form ref="checkTasksRankingForm" @handleCancel="handleCancel" @showOrHide ="showOrHide"></check-tasks-ranking-form>
      <template slot="footer">
        <a-button @click="handleCancel">关闭</a-button>
      </template>
    </a-modal>
<div class="ep-table">
    <zh-table height="auto"  ref="tasksTable"  row-id="roleId"
               :url="tableUrl" :columns="tableColumn" >
      <template #filter="{ $panel, column }">
           <input type="type" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @input="$panel.changeOption($event, true, option)">
      </template>
      <template #operate="{ row }">
        <div class="alert-message">
          <i class="fa fa-exclamation-circle alert-message-icon"></i>
          <span class="alert-message-content">
              <ep-button status="primary" @click=showDetail(row)>查看</ep-button>
            </span>
        </div>
      </template>
    </zh-table>
</div>

  </div>
</template>
<script>
import {checkTaskQuery, getManageType, getPermissionParams} from "@/services/system/whdngxlApi"
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import moment from 'moment'
import ZhTable from "@/components/zh-table/ZhTable";
import {getBatchDict} from "@/services/system/api";
import UnmovableRelics from "@/pages/whdngxl/TasksCheckManage/UnmovableRelics";
import {TreeSelect} from "ant-design-vue";
import EpSearch from "@/components/assembly/search";
import {mapGetters} from "vuex";
export default {
  name: 'CheckPersonList',
  computed: {
    ...mapGetters(['size']),
  },
  components: {
    EpSearch,
    checkTasksRankingForm : ()  =>import ("@/pages/system/form/CheckTasksRankingForm"),
    ZhTable
  },
  data() {
    return {
      dictData: {},
      filtersData:{},
      queryParam: {
        c0302:'',
        manageAreas: undefined,},
      taskAreaTree: [],
      SHOW_PARENT,
      tableColumn: [
        // {type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号'},
        {field: 'c0301', title: '排查任务总表ID',visible: false, align: 'center', width: 150},
        {field: 'c0302', title: '任务名称', align: 'center', width: 300},
        {field: 'c0303Name', title: '任务表', align: 'center',filters:[], width: 120},
        {field: 'tasksArea', title: '任务范围', align: 'center', width: 250},
        {field: 'c0304',title: '开始时间',sortable:true, align: 'center', width: 120},
        {field: 'c0305',title: '截止时间',sortable:true, align: 'center', width: 120},
        {field: 'c0306Name', title: '任务状态', align: 'center', width: 120,
         /* filters:[{data: '' }],
          filterMethod:this.filterC0306Method,
          filterResetMethod:this.filterResetMethod,
          slots: {
              // 使用插槽模板渲染
              filter: 'filter',

          }*/
          filters:[],
        },
        {field: 'createName', title: '创建人', align: 'center', width: 100},
        {field: 'a0104Name', title: '创建人职务', align: 'center', width: 120},
        {field: 'createTime', title: '创建时间',sortable:true, align: 'center', width: 120},
        {
          field: 'operate', title: '任务排行', fixed: 'right', align: 'center', width: 120, slots: {
            // 使用插槽模板渲染
            default: 'operate'
          }
        },
        {field: 'tasksPlan', title: '任务进度',sortable:true, align: 'center', width: 120},
      ],
      tableData: [],
      tableUrl: checkTaskQuery,
      toolbarConfig: {
        custom: true,
        slots: {}
      },
      visible: false,
      option:{data:''},
      manageRate:'',
    }
  },
  created() {
    //获取任务范围
    this.$http.post(getPermissionParams, {}).then((res) => {
      const data = res.result;
      this.taskAreaTree = data.orgTreeData;
    });
    const params ={}
    this.$http.post(getManageType, params).then(res => {
      if(res.result){
        this.manageRate =  res.result.rate
      }
    })
    this.$nextTick(() => {
      this.init()
    })
  },
  mounted() {
  },
  methods: {
    moment,
    manageAreaChange() {
      this.findList();
    },
    init() {
      const params2 = {}
      params2.dictFields = 'c0306,c0303'
      this.$http.post(getBatchDict, params2).then(res => {
        this.dictData = res.result
        //获取筛选数据
        UnmovableRelics.methods.getFiltersData(this,'tasksTable')
      })
      this.findList()
    },
    findList() {
       this.$refs.tasksTable.query(this.queryParam)
    },
    clearBtn(){
       this.findList()
    },
    handleCancel() {
      this.visible=false
    },
    showOrHide() {
      this.visible=!this.visible
    },
    showDetail(row){
      this.showOrHide()
      this.$nextTick(()=>{
        this.$refs.checkTasksRankingForm.initData(row,this.manageRate);
      })
    },
    filterC0306Method ({option, row }) {
      return row.c0306Name === option.data
    },
    filterRecoverMethod ({ option }) {
      option.data = ''
    },
    filterAreaMethod ({ option, row }) {
        return row.tasksArea.includes(option.data)
      },
  },
  watch: {
  }
}
</script>
<style lang="less" scoped>
.permission {
  //padding: 15px 20px 0;
  height: 100%;

  .desc,
  .operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    > div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }


  }

  .desc {
    margin-bottom: 20px;
  }

  .operate {
    margin-bottom: 15px;
    .field {
      flex: 0 0 auto;
      position: relative;
      margin-left: 15px;
      .field-box {
        position: absolute;
        top: 40px;
        left: 0;
        right: -40px;
        z-index: 99;
        border: 1px solid #2175a9;
        background: #002a44;
        border-radius: 5px;
        ul {
          padding: 10px;
          li {
            padding: 1px 0;
          }
        }
        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px;
          border-top: 1px solid #2175a9;
          color: #fff;
          p {
            flex: 1;
            text-align: center;
            cursor: pointer;
            &:hover {
              color: #49bbeb;
            }
          }
        }
      }
    }
  }
  .ep-table {
    height: calc(100% - 60px);
  }
}
</style>
